<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>评论列表</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <style>
    .badge {
      float: right;
      margin-right: 5px;
    }

    .my-page {
      margin: 0 5px;
    }

    .all-page-content {
      margin-left: 5px;
    }
  </style>
</head>

<body style="padding: 15px;">

  <!-- 评论面板 -->
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">发表评论</h3>
    </div>
    <form class="panel-body cmt-form">
      <div>评论人：</div>
      <input type="text" class="form-control" name="username" autocomplete="off" />
      <div>评论内容：</div>
      <textarea class="form-control" name="content"></textarea>
      <button type="submit" class="btn btn-primary submit">发表评论</button>
    </form>
  </div>


  <!-- 评论列表 -->
  <ul class="list-group">
    <!-- <li class="list-group-item">
       <span>评论内容</span>
       <span class="badge del" style="cursor:pointer; background-color: lightgray;">删除</span> 
       <span class="badge" style="background-color: #F0AD4E;">评论时间：xxx</span>
       <span class="badge" style="background-color: #5BC0DE;">评论人：xxx</span>
    </li> -->
  </ul>

  <!-- 分页器 -->
  <nav>
    <ul class="pagination">
      <li>
        <button class="last">
          <span>&laquo;</span>
        </button>
      </li>
      <li class="my-page">
        <span class="page-show"></span>
      </li>
      <li>
        <button class="next">
          <span>&raquo;</span>
        </button>
      </li>
      <li class="all-page-content">
        <span>共计:<span class="all-page"></span>页</span>
      </li>
    </ul>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="./lib/form-serialize.js"></script>

  <script>
    let page = 1
    let allPage
    //获取评论和渲染页面函数经常需要用到,所以封装成函数
    function getData(page = 1) {
      return axios({ url: 'https://hmajax.itheima.net/api/cmtlist', params: { page } })
    }

    function renderPage({ allPage, data: reviewData }, page) {
      document.querySelector('.all-page-content .all-page').innerHTML = allPage
      document.querySelector('.pagination .page-show').innerHTML = page
      document.querySelector('.list-group').innerHTML = reviewData.map(ele => `<li class="list-group-item" data-id="${ele.id}">
       <span>${ele.content}</span>
       <span class="badge del" style="cursor:pointer; background-color: lightgray;">删除</span> 
       <span class="badge" style="background-color: #F0AD4E;">评论时间：${ele.time}</span>
       <span class="badge" style="background-color: #5BC0DE;">评论人：${ele.username}</span>
    </li>`).join('')

    }

    async function updatePage(page = 1) {
      try {
        const { data } = await getData(page)
        console.log(data)

        //渲染页面--总页面数/当前页面/评论
        allPage = data.allPage
        if (page > allPage) {

          renderPage(data, allPage)
        } else {
          renderPage(data, page)
        }
      } catch (error) {
        alert(error)
        console.log(error);

      }


    }
    //'💕'从服务器获取数据,渲染页面,这里默认渲染的是第一页
    updatePage()


    //💕💕底部的按钮,点击可以通过里面的数字来确定渲染的是哪一页,
    const last = document.querySelector('.pagination .last')
    const next = document.querySelector('.pagination .next')
    last.addEventListener('click', function () {


      //更新页面
      if (--page > 0) {

        updatePage(page)
      }

    })
    next.addEventListener('click', async function () {
      const { data } = await getData()
      allPage = data.allPage
      if (page < allPage) { updatePage(++page) }

    })


    //💕💕💕新增数据,点击提交,提交到服务器,然后再次请求数据来渲染
    document.querySelector('.panel-body').addEventListener('submit', async function (e) {
      e.preventDefault()
      //收集表单数据
      const form = document.querySelector('.panel-body')
      const { username, content } = serialize(form, { hash: true, empty: true })

      try {

        //发送到服务器
        const res = await postData(username, content)

        //更新页面--使用全局变量page
        updatePage(page)

      } catch (error) {
        alert(error)
      }

    })

    function postData(username, content) {
      return axios({ url: 'https://hmajax.itheima.net/api/addcmt', method: 'post', data: { username, content } })
    }


    //💕💕💕💕删除数据,事件委托,点击对一会给你的删除按钮,获取id,然后请求删除数据,再更新页面---这里的页面应该是当前页面
    document.querySelector('.list-group').addEventListener('click', async function (e) {

      if (e.target.classList.contains('del')) {
        const id = e.target.parentNode.dataset.id
        // console.log(id);

        //根据id来删除数据
        axios({ url: 'https://hmajax.itheima.net/api/delcmt', params: { id } }).then(res => {
          console.log(res)
        }).catch(err => alert(err))
        //重新更新页面

        updatePage(page)

        //💕💕💕💕💕删除最后一条数据,自动回到上一页
        // if (page == allPage) {



        // }

      }
    })




  </script>

  <script>
    //在这里创建了git仓库,之前提交了第一个版本,现在做修改,然后提交第二个版本

  </script>
</body>

</html>